<template>
	<view>
		<u-navbar
			@rightClick="rightClick"
			:autoBack="true"
			rightText='搜索'
		>
			<view slot='center' class='search'>
				<u-search 
					placeholder="请搜索您想要的课程" 
					v-model="keyword"
					:focus='true'
					:showAction='false'
					:clearabled='false'
					height='0'
					@search='rightClick'
				></u-search>
			</view>
		</u-navbar>
		<view class='line'></view>
		<view class='search-history' v-if='historyList.length > 0'>
			<view class='history-title'>
				<view class='history-text'>历史搜索</view>
				<view @click='removeHistory'>
					<u-icon name="trash"></u-icon>
				</view>
			</view>
			<view class='history-list'>
				<view
					v-for='(item,index) in historyList'
					:key='index'
				>{{ item }}</view>
			</view>
		</view>
		<view class='search-hot'>
			<view class='hot-title'>
				<u-icon name="search" size='22'></u-icon>
				<view class='history-text'>热门搜索</view>
			</view>
			<view class='hot-list'>
				<view>vue</view>
				<view>面试</view>
				<view>vue</view>
				<view>面试</view>
				<view>vue</view>
				<view>面试</view>
				<view>vue</view>
				<view>面试</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data () {
		return {
			keyword:'',
			historyList:JSON.parse(uni.getStorageSync('historySearch'))
		}
	},
	methods:{
		//搜索按钮
		rightClick(){
			if( !this.keyword ) return;
			
			let index = this.historyList.indexOf( this.keyword );
			
			if( index < 0 ){
				this.historyList.unshift(this.keyword);
				uni.setStorageSync('historySearch',JSON.stringify(this.historyList));
			}else{
				this.historyList.unshift(  this.historyList.splice(index,1)[0]    )
				uni.setStorageSync('historySearch',JSON.stringify(this.historyList));
			}
		},
		//删除历史搜索
		removeHistory(){
			let That = this;
			uni.showModal({
				title:'您确定要删除历史记录吗？',
				success:function( e ){
					if( e.confirm ){
						That.historyList = [];
						uni.setStorageSync('historySearch',JSON.stringify([]));
					}
				}
			})
		}
	}
}
</script>

<style>
.search{
	width: 527rpx;
}
/deep/ .u-search__content{
	padding:6rpx 20rpx;
}
.line{
	width: 100%;
	height: 10rpx;
	background: rgba(241,241,241,0.39);
	border: 1rpx solid #DCDCDC;
	margin-top:110rpx;
}
.search-history{
	padding: 33rpx;
}
.history-title{
	display: flex;
	justify-content: space-between;
}
.history-text{
	font-size: 28rpx;
	font-weight: bold;
	color: #636363;
}
.history-list{
	display: flex;
	flex-wrap: wrap;
	padding-top:33rpx;
}
.history-list > view{
	padding: 5px 10px;
	margin:10rpx 0px;
	font-size:24rpx;
	background-color: #e6e6e6;
	border-radius: 5px;
}
.history-list > view:nth-child(2n){
	margin-left:30rpx;
	margin-right:30rpx;
}
.search-hot{
	padding:33rpx;
}
.hot-title{
	display: flex;
	padding-bottom:33rpx;
	border-bottom:1px solid #ccc;
}
.hot-list{
	display: flex;
	flex-wrap: wrap;
}
.hot-list > view{
	width: 50%;
	padding-top:33rpx;
	font-size: 29rpx;
	font-weight: 400;
	color: #333333;
}
</style>